<script setup>
import { getCommentAPI } from "@/apis/wall";
import { onMounted, ref } from "vue";
import { View, StarFilled } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";

const router = useRouter()
const posts = ref([]);
const page = ref(1);
const pageSize = ref(20);
const comment = async () => {
  const res = await getCommentAPI({
    page: page.value,
    pageSize: pageSize.value,
  });
  posts.value = res.data;
};

const goToPublish = () => {
  router.push('/pushwall')
}

onMounted(() => comment());


</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <div class="school">
          <div class="schoolname">南青e站表白墙</div>
          <div class="school-image"></div>
        </div>
      </el-aside>
      <el-main>
        <div class="post-list" v-if="posts.length">
          <div class="post-item" v-for="post in posts" :key="post.id">
            <el-avatar :size="40" :src="post.publisher_avatar"></el-avatar>
            <div class="post-content">
              <div class="post-header">
                <span class="username">{{ post.publisher_name }}</span>
              </div>
              <div class="post-text">{{ post.message_content }}</div>
              <div class="post-picture">
                <img :src="typeof post.picture_list==='string'?post.picture_list:post.picture_list[0]" class="limit-picture" />
              </div>
              <div class="post-actions">
                <span
                  ><i class="el-icon-thumb"></i><el-icon><View /></el-icon>
                  {{ post.message_like }}</span
                >
                <span
                  ><i class="el-icon-chat-dot-round"></i><el-icon><StarFilled /></el-icon>
                  {{ post.message_comment }}</span
                >
              </div>
            </div>
          </div>
        </div>

        <div v-else class="no-data">暂无数据</div>
      </el-main>
      <el-aside width="200px">
        <div class="publish-btn-container">
          <button class="publish-btn" @click="goToPublish">
            <span class="btn-text">点我去发布</span>
            <span class="btn-icon">→</span>
          </button>
        </div>
      </el-aside>
    </el-container>
  </div>
</template>

<style scoped>
.schoolname {
  width: 100%;
  background-color: #807b7b;
  color: aliceblue;
  text-align: center;
  padding: 10px 0;
  border-radius: 4px 4px 0 0;
  box-sizing: border-box;
}

.school-image {
  width: 100%;
  height: 150px;
  background: url("../../assets/images/9.jpeg") no-repeat center center;
  background-size: cover;
  border-radius: 0 0 4px 4px;
}

.tabs {
  margin-bottom: 20px;
}

.post-list {
  max-width: 600px;

  margin: 0 auto;
}

.post-item {
  display: flex;
  padding: 25px;
  border-bottom: 1px solid #f0f0f0;
  min-height: 80px;
  border-radius: 20px;
  background-color: white;
  margin:30px;

}

.post-content {
  flex: 1;
  min-width: 0;

}

.limit-picture {
  max-width: 470px;
  max-height:400px;
  width: auto;
  height: auto;
  display: block;
}





.publish-btn-container {
  display: flex;
  justify-content: center;
  margin: 30px 0;
}

.publish-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  background: linear-gradient(135deg, #409eff, #36b1ff);
  color: white;
  border: none;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(32, 160, 255, 0.3);
  transition: all 0.3s ease;
  overflow: hidden;
}

.publish-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(32, 160, 255, 0.4);
  background: linear-gradient(135deg, #36b1ff, #409eff);
}

.publish-btn:active {
  transform: translateY(1px);
}

.btn-text {
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
}

.btn-icon {
  margin-left: 8px;
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateX(-10px);
  position: relative;
  z-index: 2;
}

.publish-btn:hover .btn-icon {
  opacity: 1;
  transform: translateX(0);
}

/* 水波纹效果 */
.publish-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%, -50%);
  transform-origin: 50% 50%;
}

.publish-btn:hover::after {
  animation: ripple 1s ease-out;
}
</style>
